<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
        <p>

        </p>
        <script>

            let fontArr = ['Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande'
 ,'Courier New', "Courier", "monospace",'Franklin Gothic Medium', 'Arial Narrow', 'Segoe UI', "Tahoma", "Geneva", "Verdana",
 'Times New Roman', "Times", "serif",'Trebuchet MS', 'Lucida Sans Unicode',  "sans-serif",
 "Arial", "Helvetica"];

            let p = document.querySelector('p');
            
            for(var value of fontArr){
                let textNode = document.createElement("p");
                textNode.innerText = "this is "+ value;
                textNode.style.fontFamily = value;
                p.appendChild(textNode);
            }
            
        </script>
    </body>
</html>